<template>
	<div> 
		<so-header :seller="headerTitle"></so-header>
		<div class="el-main-revie">
        	<mt-search
			  v-model="value"
			  cancel-text=""
			  placeholder="搜索"
			  >
			</mt-search>
        </div>
        <div class="main-revie">
        	<ul>
             
               <li v-for="(list, ind) in JoinList" :key="ind">
                 <img src="../common/images/cir_03.jpg">
                 <div class="main-center-join-list">
                   <h5>{{list.name}}</h5>
          
                    <p>请求申请加入协会</p>

                 </div>
                 <div class="main-right">
                   <mt-button class="el-middle-button" @click="checkJoin(list.chid)" v-if="list.j_status==2">同意</mt-button>
                   <mt-button  class="el-middle-button" style="background:#ccc" v-if="list.j_status==1">已同意</mt-button>
                 </div>
               </li>
               <div class="clear"></div>
             </ul>
        </div>
	</div>


</template>

<script>
import soHeader from '../public/header.vue';
import { MessageBox } from 'mint-ui';

  export default {
    data() {
      return {
      	headerTitle:'新的朋友',
        JoinList:'',
        value:'',
        cid:'1'
        
      };
    },
    components:{
    	soHeader,
    },
    mounted() {
    	
    	this.cid = this.$route.query.cid;
    	this.getJoinList();
    },
    watch:{
    	value:function(newvs,oldvs){
    		let that = this;
     		let cid = that.cid;
			console.log(newvs);
			if(!newvs){
				that.getJoinList();
			}else{
				that.getJoinList(newvs);
			}
	        
	    }
	},

    methods: {
     getJoinList:function(val){
		let that = this;
		let cid = that.cid;
		if(val != ''){
     		var _Data = {
     			cid:cid,
     			keywrod:val
     		};
     	}else{
     		var _Data = {
     			cid:cid,
     		};
     	}
        this.$fetch(that.$path+'/api.php/Circle/getJoinList',_Data)
          .then((res) => {
          	console.log(res);
            if(res.code == 200){
            	console.log(985);
              that.JoinList = res.data;
            }    
          });
     },
     checkJoin:function(event){
     	let that = this;
     	var chid = event;
     	this.$fetch(that.$path+'/api.php/Circle/checkJoin',{chid:chid})
          .then((res) => {
            if(res.code == 200){
              MessageBox.alert('操作成功');
              that.getJoinList();
            }else{
              MessageBox.alert(res.msg);
            }    
          });
     },
     search:function(){
     	let that = this;
     	let _val = that.value;
     	let cid = that.cid;
     	this.$fetch(that.$path+'/api.php/Circle/getJoinList',{keywrod:_val,cid:cid})
          .then((res) => {
            if(res.code == 200){
              that.JoinList = res.data;
            }else{
              MessageBox.alert(res.msg);
            }    
          });
     	
     },
     pushIndex:function(){
        this.$router.push({path: "/"});
      },
      


    }
  }

</script>
<style >
.mint-search{

}
.main-revie ul{
  width:100%;
  margin: 0;
  padding: 0;
}
.main-revie ul li{
  width:100%;
  float: left;
  padding-left: 10px;
  padding-bottom: 10px;
  margin-top:15px;
  border-bottom: #d8d8d8 solid 1px;
}
.main-revie ul .active{
  border-bottom: none;
}
.main-revie ul li img{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    float: left;
    margin: 5px;
}
.main-center-join-list{
      text-align: left;
    margin-left: 2%;
    float: left;
    width:55%;
}
.main-center-join-list h5{
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.main-center-join-list p{
  font-size: 14px;
  color:#999999;
}
.main-right {
  float: left;
    width: 20%;

}
.main-right .el-button {
    width: 60px;
    padding: 8px 10px;
    border-radius: 0;
    color: #fff;
    background:#ee7676;
}
</style>
